<template>
    <div class="wrapper">
        <div style="height: 50px;background-color: blue;display: flex" class="order-top">
            <div style="display: flex;align-items: center;width: 100%;justify-content: center">
                <span style="color: white;font-size: 16px">我的订单</span>
            </div>
        </div>
        <div class="on-pay">
            <div style="font-size: 14px;margin-top: 15px;margin-left: 10px;margin-bottom: 15px">
                <p>未支付订单信息:</p>
            </div>
            <div style="display: flex;font-size: 16px;align-items: center">
                <p style="font-size: 16px;font-weight: bold;margin-left: 10px">不好吃面条(好吃)</p>
                <i class="el-icon-caret-bottom" style="font-size: 16px;margin-left: 20px"></i>
                <p style="margin-left: 70px;color: red">￥30</p>
                <p style="color: white;background-color: goldenrod;margin-left: 20px">去支付</p>
            </div>
            <div style="font-size: 12px;margin-top: 15px;margin-left: 10px;display: flex;">
                <p>肉面团(好吃)</p>
                <p style="margin-left: 20px">x2</p>
                <p style="margin-left: 200px">￥20</p>
            </div>
            <div class="big-box">
                <div class="img-big" style="margin-left: 30px">
                    <img src="../../assets/04.png" alt="">
                </div>
                <div style="margin-left: 30px">
                    素面团(好吃)
                </div>
                <div style="margin-left: 10px">x1</div>
                <div style="margin-left: 100px">￥10</div>
            </div>
            <div style="margin-top: 20px;font-size: 12px;display: flex">
                <div style="margin-left: 20px">配送费</div>
                <div style="margin-left: 290px">￥3</div>
            </div>
        </div>
        <div class="on-pay" style="margin-top: -30px">
            <div style="display: flex;font-size: 16px;align-items: center">
                <p style="font-size: 16px;font-weight: bold;margin-left: 10px">清真食物(好吃)</p>
                <i class="el-icon-caret-bottom" style="font-size: 16px;margin-left: 20px"></i>
                <p style="margin-left: 70px;color: red">￥30</p>
                <p style="color: white;background-color: goldenrod;margin-left: 20px">去支付</p>
            </div>
            <div style="font-size: 12px;margin-top: 15px;margin-left: 10px;display: flex;">
                <p>肉面团(好吃)</p>
                <p style="margin-left: 20px">x2</p>
                <p style="margin-left: 225px">￥20</p>
            </div>
            <div class="big-box-one">
                <div style="margin-left: 10px">
                    素面团(好吃)
                </div>
                <div style="margin-left: 10px">x1</div>
                <div style="margin-left: 233px">￥10</div>
            </div>
            <div style=";font-size: 12px;display: flex">
                <div style="margin-left: 10px">配送费</div>
                <div style="margin-left: 300px">￥3</div>
            </div>
        </div>
<!--        <div class="no-pay"></div>-->
        <div class="no-pay">
            <div style="font-size: 14px;margin-top: 15px;margin-left: 10px;margin-bottom: 15px;color: gray">
                <p>未支付订单信息:</p>
            </div>
            <div style="display: flex;font-size: 16px;align-items: center">
                <p style="font-size: 16px;font-weight: bold;margin-left: 10px">不好吃面条(好吃)</p>
                <i class="el-icon-caret-bottom" style="font-size: 16px;margin-left: 20px"></i>
                <p style="margin-left: 70px;color: red">￥30</p>
                <p style="color: white;background-color: goldenrod;margin-left: 20px">去支付</p>
            </div>
            <div style="font-size: 12px;margin-top: 15px;margin-left: 10px;display: flex;">
                <p>肉面团(好吃)</p>
                <p style="margin-left: 20px">x2</p>
                <p style="margin-left: 200px">￥20</p>
            </div>
            <div class="big-box">
                <div class="img-big" style="margin-left: 30px">
                    <img src="../../assets/04.png" alt="">
                </div>
                <div style="margin-left: 30px">
                    素面团(好吃)
                </div>
                <div style="margin-left: 10px">x1</div>
                <div style="margin-left: 100px">￥10</div>
            </div>
            <div style="margin-top: 20px;font-size: 12px;display: flex">
                <div style="margin-left: 20px">配送费</div>
                <div style="margin-left: 290px">￥3</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "orderPage"
    }
</script>

<style scoped>
    .wrapper{
        width: 375px;
        height: auto;
    }
    .order-top{
        position: fixed;
        top: 0;
        width: 375px;
    }
    .on-pay{
        width: 375px;
        height: auto;
        padding-top: 50px;
    }
    .big-box{
        width: 375px;
        height: 90px;
        display: flex;
        align-items: center;
        margin-top: 20px;
        font-size: 12px;
    }
    .img-big img{
        width: 90px;
        height: 90px;
    }
    .no-pay{
        margin-top: 80px;
    }
    .big-box-one{
        width: 375px;
        height: 90px;
        display: flex;
        align-items: center;
        /*margin-top: 20px;*/
        font-size: 12px;
    }
</style>
